<template>
  <section class="deal-status section">
    <el-tabs v-model="currTab" @tab-click="onTabHeda">
      <el-tab-pane :label="`已关闭(${0})`" name="hasClose">
        <line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal>
      </el-tab-pane>
      <el-tab-pane :label="`待付款(${0})`" name="waitPay"
        ><line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal
      ></el-tab-pane>
      <el-tab-pane :label="`待发货(${0})`" name="waitSend"
        ><line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal
      ></el-tab-pane>
      <el-tab-pane :label="`待收货(${0})`" name="waitGet"
        ><line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal
      ></el-tab-pane>
      <el-tab-pane :label="`待评价(${0})`" name="waitComment"
        ><line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal
      ></el-tab-pane>
      <el-tab-pane :label="`已评价(${0})`" name="hasComment"
        ><line-deal
          v-for="(item, ind) in 10"
          :tabName="currTab"
          :key="ind"
        ></line-deal
      ></el-tab-pane>
    </el-tabs>
    <div id="page" class="f-c-c">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="currPageChange"
        :current-page="pages[currTab].currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pages[currTab].pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages[currTab].total"
        background
      >
      </el-pagination>
    </div>
  </section>
</template>
<script>
import LineDeal from "../side/LineDeal.vue";
export default {
  name: "DealStatus",
  components: {
    LineDeal,
  },
  data() {
    return {
      currTab: "waitGet",
      pages: {
        hasClose: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
        waitPay: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
        waitSend: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
        waitGet: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
        waitComment: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
        hasComment: {
          currPage: 1,
          pageSize: 10,
          total: 123,
        },
      },
    };
  },
  methods: {
    pageSizeChange() {},
    currPageChange() {},
    onTabHeda(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    let { tabName } = this.$route.params;
    if (tabName) {
      this.currTab = tabName;
    }
  },
};
</script>
<style lang="scss" scoped>
#page {
  padding: 30px 0;
}
</style>